import Logs from './commponts/logs/logs'
import Event from './commponts/event/index'
import FatherApp from './commponts/props/Father'
import State from './commponts/state/state'
import Fetchobject from './commponts/Fetchobject/FetchDom'
import ClassElement from './commponts/classElement/ClassElement'
import LogFrom from './commponts/logs/LogFrom'
import { useState } from 'react'
// import Card from './commponts/UI/card/Card'
const App = () =>{
  const [logsData, setLogsData] = useState([{
    id: 1,
    date: '2022-10-13',
    desc: '学习xxx',
    time: 40,
  },{
    id: 2,
    date: '2021-11-11',
    desc: '学习xxx',
    time: 50,
  }])
  // 删除
  const deleItemByIndex = (index) =>{
    setLogsData(preState => {
      let newLogs = [...preState]
      newLogs.splice(index, 1)
      return newLogs
    })
  }
  // const logsData = 
  const saveLogsData = (newLog) => {
    newLog.id = logsData.length + 1
    setLogsData([...logsData, newLog])
    console.log('logsData',logsData)
  }
  return <div>
    <div className='logs'>
      <LogFrom saveLogsData={saveLogsData}></LogFrom>
      <Logs logsData={logsData} onDeleLog={deleItemByIndex}></Logs>
    </div>
    {/* <Card></Card> */}
    <hr></hr>
    <Event></Event>
    <hr></hr>
    <FatherApp></FatherApp>
    <hr></hr>
    <State></State>
    <hr></hr>
    <Fetchobject></Fetchobject>
    <hr></hr>
    <ClassElement></ClassElement>
  </div>
}

export default App